<!-- saved from url=(0016)http://localhost -->
<html>
    <head>
        <title>Html Control Test</title>
    </head>
    <body>
    <div id="TableContainer1">
        <div class="clear">
            <h2>TableWithHeaders</h2>
        </div>
        <table id="TableWithHeaders" border="1">
            <thead>
                <tr>
                    <th>Header1</th>
                    <th>Header2</th>
                    <th>Header3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>               
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>               
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>               
                </tr>
            </tbody>
        </table>
    </div>
        
    <br/>
    <div id="divWithTableWithAlertOnHeaderClick">
        <table id="tableWithAlertOnHeaderClick" border="1">
            <thead>
                <tr>
                    <th onclick=" alert('Header1'); ">Header1</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td onclick=" alert('Cell 1'); "> Cell 1</td>
                </tr>
                <tr>
                    <td ondblclick=" alert('Cell 2'); "> Cell 2</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="TableContainer2">
        <div class="clear">
            <h2>TableWithOutHeaders</h2>
        </div>
        <table id="TableWithOutHeaders" border="1">
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>5</td>
                    <td>6</td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>8</td>
                    <td>9</td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="TableContainer3">
        <div class="clear">
            <h2>TableWithHeaderCells</h2>
        </div>
        <table id='TableWithHeaderCells'>
            <tr>
                <th>header1</th>
                <td>0</td>
                <td>1</td>
                <td>2</td>
            </tr>
            <tr>
                <th>header2</th>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
            <tr>
                <th>header3</th>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
        </table>
    </div>
    <br /><br />
    <div id="parentdiv">
            
        <input type="TEXT" name="text1_test" />
        <p id="para1">This is a test paragraph to test the new HtmlParagraph control!</p>
        <button>Simple Button</button>
        <br /><br />
        <input type="submit" value=ClickOnMe onclick=" alert('onclick'); " />
        <br /><br />
        <input type="file" id="fileupload"/>
        <br /><br />
        <label for="male">Male</label>
        <input type="radio" name="sex" id="male" value="male"><br>
        <label for="female">Female</label>
        <input type="radio" name="sex" id="female" value="female" checked /><br><br>
        <textarea rows="4" cols="50" id="textArea">
           Type Something
        </textarea>
    </div>
    <br /><br />
    <div id="unorderedListTest">
        <ul id="unorderedList">
            <li>List Item 1</li>
            <li>List Item 2</li>
            <li>List Item 3</li>
        </ul>
    </div>
        
    <br /><br />
    <div id="checkboxDiv">
        <input name="A" type="checkbox" /> A
        <input name="B" type="checkbox" checked="checked"/> B
    </div>
        
    <br /><br />
    <div id="comboboxDivhtml5">
        <input type=text list=html5comboboxlist>
        <datalist id=html5comboboxlist>
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </datalist>
    </div>
    <br /><br />
    <div id="comboboxDivhtml4">
        <select name="html4comboboxlist">
            <option>one</option>
            <option>two</option>
            <option>three</option>
        </select>
    </div>
        
    <br /><br />

    <select size="5" name="listbox" multiple>
            
        <option >one</option>
        <option selected>two</option>
        <option>three</option>
        <option>four</option>
    </select>
        
    <br /><br />
        
    <div id="EditDiv" contenteditable="true">
        I am an Edit Div
    </div>

    <br /><br />
    <span contenteditable="true">I am an Edit Span</span>
        
      
        <div id="TableContainer3">
            <div class="clear">
                <h2>Table With Special Cell Inside</h2>
            </div>
            <table id="TableWithSpecialCell" border="1">
                <thead>
                    <tr>
                        <th>Header Edit</th>
                        <th>Header Checkbox</th>
                        <th>Header 2 Edit</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="TEXT" name="table_text1" /> 
                        </td>
                        <td>
                            <input name="table_chkbox1" type="checkbox" /> 
                        </td>
                        <td>
                            <input type="TEXT" name="table_textA" />
                            <input type="TEXT" name="table_textB" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="TEXT" name="table_text2" />
                        </td>
                        <td>
                            <input name="table_chkbox2" type="checkbox" />
                        </td>
                        <td>
                            <input type="TEXT" name="table_textA" />
                            <input type="TEXT" name="table_textB" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="TEXT" name="table_text3" />
                        </td>
                        <td>
                            <input name="table_chkbox3" type="checkbox" />
                        </td>
                        <td>
                            <input type="TEXT" name="table_textA" />
                            <input type="TEXT" name="table_textB" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        

</html>